<template>
  <div class="bigBox">
    <div class="left">
      <div class="top" ref="leftTop"></div>
      <div class="bottom" ref="leftBottom"></div>
    </div>
    <div class="center" id="floodMap">
      <GDMap />
      <el-table :data="data" style="width: 90%; margin: 0 auto">
        <el-table-column label="预警信息" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="danger">{{ scope.row.name }}</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <div class="top" ref="rightTop"></div>
      <div class="bottom" ref="rightBottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-gl' //3D地图插件
import { onMounted, ref } from 'vue'

import GDMap from './components/GDMap.vue'

const data = ref([
  {
    name: '泥石流将于3/15日凌晨5点在张家界市xxx地区，请有关人员撤离',
  },
])

const leftTop = ref<HTMLElement>()
const leftBottom = ref<HTMLElement>()
const rightTop = ref<HTMLElement>()
const rightBottom = ref<HTMLElement>()

const cacheCom = new Map<string, HTMLDivElement>()
const initMap = async () => {
  const myChart1 = echarts.init(leftTop.value!)
  const option1 = {
    title: {
      text: '泥石流预警',
    },
    xAxis: {
      type: 'category',
      data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00'],
    },
    yAxis: {
      type: 'value',
    },
    color: ['#2f89cf'],
    series: [
      {
        data: [12, 4, 5, 6, 16, 13, 13],
        type: 'bar',
      },
    ],
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', () => {
    myChart1.resize()
  })

  const myChart2 = echarts.init(leftBottom.value!)
  const option2 = {
    // title: {
    //   text: '近五年泥石流灾害分析',
    // },
    tooltip: {},
    legend: {
      data: ['年降水量', '坡度指数', '土壤含水率', '植被覆盖率', '人类活动指数'],
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2019', '2020', '2021', '2022', '2023'], // 时间跨度改为五年
      },
    ],

    grid: {
      x: 25,
      y: 60,
      x2: 20,
      y2: 20,
    },

    yAxis: [
      {
        type: 'value',
        name: '降水量(mm)',
        splitLine: { show: false },
        axisLine: {
          show: true,
          lineStyle: { color: '#5470C6' },
        },
        axisLabel: {
          formatter: function (value) {
            return value >= 1400 ? `{bold|${value}}` : value
          },
          rich: { bold: { fontWeight: 'bold' } },
        },
      },
      {
        type: 'value',
        name: '指数(%)',
        position: 'right',
        splitLine: { show: false },
        axisLine: {
          show: true,
          lineStyle: { color: '#91CC75' },
        },
      },
    ],
    series: [
      {
        name: '年降水量',
        type: 'line',
        stack: 'Total',
        data: [1120, 980, 1450, 1320, 1560], // 单位：毫米
        color: '#5470C6',
        markPoint: {
          data: [
            { type: 'max', name: '峰值' },
            { type: 'min', name: '谷值' },
          ],
        },
      },
      {
        name: '坡度指数',
        type: 'line',
        stack: 'Total',
        data: [6.2, 6.5, 6.8, 7.1, 7.3], // 坡度等级（0-10）
        color: '#91CC75',
        smooth: true,
      },
      {
        name: '土壤含水率',
        type: 'line',
        stack: 'Total',
        data: [32, 28, 41, 37, 45], // 百分比
        color: '#FAC858',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(250,200,88,0.6)' },
            { offset: 1, color: 'rgba(250,200,88,0.0)' },
          ]),
        },
      },
      {
        name: '植被覆盖率',
        type: 'line',
        stack: 'Total',
        data: [68, 65, 62, 59, 55], // 百分比
        color: '#73C0DE',
        lineStyle: {
          type: 'dashed',
        },
      },
      {
        name: '人类活动指数',
        type: 'line',
        stack: 'Total',
        data: [3.2, 3.8, 4.5, 5.1, 6.0], // 工程活动强度（0-10）
        color: '#EE6666',
        symbol: 'triangle',
        symbolSize: 12,
      },
    ],
  }

  myChart2.setOption(option2)
  window.addEventListener('resize', () => {
    myChart2.resize()
  })

  const myChart3 = echarts.init(rightTop.value!)
  const option3 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: '大模型预测泥石流',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['Line 1'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, 180, 200, 150, 100, 220, 160], // 替换为新数据
      },
    ],
  }

  myChart3.setOption(option3)
  window.addEventListener('resize', () => {
    myChart3.resize()
  })

  const myChart4 = echarts.init(rightBottom.value!)
  const option4 = {
    title: {
      text: '模型预测与实际泥石流对比',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['大模型', '实际情况'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '大模型',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 111, 145],
      },
      {
        name: '实际',
        type: 'line',
        stack: 'Total',
        data: [110, 113, 90, 124, 80, 123, 124],
      },
    ],
  }

  myChart4.setOption(option4)
  window.addEventListener('resize', () => {
    myChart4.resize()
  })
}
onMounted(() => {
  // 初始化地图
  initMap()
})
</script>

<style scoped lang="scss">
.bigBox {
  box-sizing: border-box;
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  padding: 20px;
  display: flex;
  justify-content: space-between;

  .title {
    color: $primary-color;
    font-weight: bold;
  }

  .left,
  .right {
    width: 420px;
    height: 100%;

    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;

    .top,
    .bottom {
      border: 1px solid $primary-border-color;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 20px;
    }
  }

  .center {
    flex: 1;
    height: 300px;
    width: 300px;
  }
}
</style>
